import React,{FC,useEffect} from 'react';
import styles from './login.less';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {useDispatch,useSelector,UserModelState,useLocation,useHistory } from 'umi';

const Login:FC = ()  => {

    const dispatch = useDispatch();
    const onFinish = (values: any) => {
        //调登录接口
        dispatch({
            type:'user/Login',
            payload:{
                user_name:values.username,
                user_pwd:values.password
            }
        })
    };

    let {isLogin} = useSelector((model:{user:UserModelState}) => model.user);  //false

    let {query:{redirect}}:any = useLocation();

    const history = useHistory();

    useEffect(() => {
        //isLogin true
        if(isLogin){
            redirect = redirect ? redirect : '/main';
            //登录成功
            history.replace(redirect)
        }
    }, [isLogin])
    
      return (
          <div>
              {isLogin ? '登录成功' :'未登录'}
            <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            >
            <Form.Item
                name="username"
                rules={[{ required: true, message: 'Please input your Username!' }]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[{ required: true, message: 'Please input your Password!' }]}
            >
                <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
                </Form.Item>
        
                <a className="login-form-forgot" href="">
                Forgot password
                </a>
            </Form.Item>
        
            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                Log in
                </Button>
                Or <a href="">register now!</a>
            </Form.Item>
            </Form>
        </div>
      );
}

export default Login
